<template>
  <div class="lineBy">
    <div id="lineBy"  style="width: 100%;height:100%;"></div>
  </div>
</template>

<script>
  export default {
    props: ["echartsData","perHour"],
    data(){
      return {
//        perHour: [],
        perHourData: [100, 50, 150, 120],
//        echartsData: [[50, 30], [60, 80],[60, 30], [10, 80]],
      }
    },
    mounted(){

    },

    created(){

    },
    methods: {

      initData(){
        if (this.myChartBy != null && this.myChartBy != "" && this.myChartBy != undefined) {
          this.myChartBy.dispose();
        }
        this.myChartBy = this.echarts.init(document.getElementById('lineBy'))
        const option = {
          color: ["#54B1FF","#EF7B33","#F9E23B"],
          title: {
            text: '',
            subtext: '',
            x: 'left',
            textStyle: {
              fontSize: 14,
              fontWeight: 'bolder',
              color: '#3975FE'     // 主标题文字颜色
            },
          },
          legend: {
//            orient : 'vertical',
//            width:250,
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 10,
            x: 'center',
            data: ["蓝牙编码数", "30日累计在线车辆","30日累计骑行车辆"],
            textStyle: {
              fontSize: 12,
              color: 'gray'          // 主标题文字颜色
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle:{
              align:'left'
            }
          },
          grid: {
            left: '1%',
            right: '1%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.perHour,
              axisTick: {
                alignWithLabel: true
              },
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: 'gray'
              },
              axisLine: {
                lineStyle: {
                  color: 'gray',
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量(辆)',
              min: 0,
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: 'gray'
              },
              axisLine: {
                lineStyle: {
                  color: 'gray'
                }
              }
            }
          ],
          series: [
            {
              name: '蓝牙编码数',
              type: 'bar',
              barMaxWidth: '20px',//              stack:"sum",
              data: this.echartsData[0],

            },
            {
              name: '30日累计在线车辆',
              type: 'bar',
              barMaxWidth: '20px',//              stack:"sum",
              data: this.echartsData[1],

            },
            {
              name: '30日累计骑行车辆',
              type: 'bar',
              barMaxWidth: '20px',//              stack:"sum",
              data: this.echartsData[2],

            }
          ]
        };
        this.myChartBy.setOption(option);
        window.addEventListener("resize", () => {
          this.myChartBy.resize();
        })
      }
    },
    watch: {
      echartsData(){
        this.initData()
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .lineBy
    padding 10px
    height 100%
    width: 100%
    box-sizing border-box
    border-radius 15px
    display: flex
    justify-content: center


</style>
